<template>
  <scrolls :data="tData" class="seamless-warp" :class-option="classOption">
    <ul class="item">
      <li v-for="(tgs, index) in tData" :key="index">
        <div class="team_table_list">
          <div class="team_table_list_row">
          <div class="team_list_item">
            <div class="team_user_avatar">
            <span class="avatar_box">
              <img :src="/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(tgs.HEADPHOTOURL) ? tgs.HEADPHOTOURL : userAvatar " alt="userAvatar">
            </span>
            </div>
          </div>
          <!-- /team_list_item -->
          <div class="team_list_item">
            {{tgs.ROWNUM}}
          </div>
          <!-- /team_list_item -->
          <div class="team_list_item">
            {{tgs.USERNAME}}
          </div>
          <!-- /team_list_item -->
          <div class="team_list_item">
            {{tgs.ZUNAME}}
          </div>
          <!-- /team_list_item -->
          <div class="team_list_item">
            {{tgs.DCTZE}}万
          </div>
          <!-- /team_list_item -->
          <div class="team_list_item">
            {{tgs.MBTZE}}万
          </div>
          <!-- /team_list_item -->
          <div class="team_list_item">
            {{tgs.MBDCL}}%
          </div>
          <!-- /team_list_item -->
          </div>
          <!-- /team_table_row -->
        </div>
        <!-- /team_table_list -->
      </li>
    </ul>
  </scrolls>
</template>

<script>
import scrolls from 'vue-seamless-scroll';

export default {
  name: 'groupswiper',
  props: {
    tgsData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: {
    scrolls
  },
  data () {
    return {
      userAvatar: require('../../assets/avatar52.png'),
      tData: []
    };
  },
  computed: {
    classOption () {
      return {
        step: 1,
        limitMoveNum: 2,
        waitTime: 2000,
        switchDelay: 2000,
        singleHeight: '0.65', 
        isSingleRemUnit: true
      }
    }
  },
  mounted () {
    this.tData = this.tgsData
  },
  watch: {
    'tgsData': {
      handler (val, oldval) {
        this.tData = val
      }
    }
  }
};
</script>

<style lang="less" scoped>
.seamless-warp{
  margin: 0.1rem 0;
  height: 4.2rem;
  overflow: hidden;
  .item{
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li {
      height: 0.65rem;
      line-height: 0.65rem;
       .team_table_list{
        display: table;
        width: 100%;
        .team_table_list_row{
          display: table-row;
          height: 0.65rem;
          .team_list_item{
            display: table-cell;
            vertical-align: middle;
            font-size: 0.16rem;
            line-height: 1;
            color: #75787e;
            &:first-child,&:nth-child(3),&:nth-child(4),&:nth-child(6){
              width: 0.7rem;
            }
            &:nth-child(2){
              padding-left: 0.15rem;
            }
            &:nth-child(2),&:nth-child(5),&:nth-child(7){
              width: 0.68rem;
            }
            &:nth-child(8){
              width: 0.72rem;
            }
            .team_user_avatar{
              padding: 0.04rem;
              width: 0.52rem;
              height: 0.52rem;
              background: #282d35;
              border-radius: 0.52rem;
              -webkit-border-radius: 0.52rem;
              -moz-border-radius: 0.52rem;
              overflow: hidden;
              .avatar_box{
                display: block;
                width: 0.44rem;
                height: 0.44rem;
                overflow: hidden;
                border-radius: 0.44rem;
                -webkit-border-radius: 0.44rem;
                -moz-border-radius: 0.44rem;
                img{
                  display: block;
                  max-width: 100%;
                  height: auto;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
